<template>
	<view class="quotation">
		<view class="quotationBox " v-if="userInfo && address">
			<view class="companyInfo">
				<view class="companyInfoL">
					<view class="companyInfoTitle">
						报价企业
					</view>
				</view>
				
				<view class="">
					<view class="companyCountry">
						{{address.province}} {{address.city}}
					</view>
					<view class="companyName">
						{{address.company}}
					</view>
					<view class="companyUser">
						{{address.person}} {{address.mobile}}
					</view>
					<view class="companyAddress">
						{{address.address}}
					</view>
				</view>
			</view>
			<view class="">
				<view class="companyInfo needBox">
					<view class="needName">
						需求名称：
					</view>
					<view class="needContent" v-if="spare_parts_name">
						{{spare_parts_name}}
					</view>
				</view>
				<view class="companyInfo">
					<view class="needName">
						交货地：
					</view>
					<view class="needContent" v-if="delivery">
						{{delivery}}
					</view>
				</view>
			</view>
			

		</view>
		<view class="questionBox">
			<view class="questionText">
				*提供真实合理的报价，更容易被采购商接纳
			</view>
			<image src="@/static/icon/question.png" mode="aspectFit" class="question" @tap="showToast = true"></image>
		</view>
		<view class="quotationBox" style="margin-bottom:0;">
			<view class="companyInfo cMargin">
				<view class="needNames" style="width: 100rpx;">
					<text style="color: #F00;">*</text>
					单价:
				</view>
				<view class="addressBox">
					<view class="">
						<view class="addressTips" style="margin-right: 20rpx;">
							{{is_freight == '是' ? '含税' : '不含税'}}
						</view>
						<view class="addressTips" >
							{{is_tax_include == '是' ? '含运费' : '不含运费'}}
						</view>
					</view>
					<view class="">
						<input class="" placeholder="请输入单价" type="digit" style="width: 200rpx;"
							placeholder-style='color: #CCCCCC;font-size: 28rpx;' v-model="price" />
						<view class="moneyIcon">
							元
						</view>
					</view>
					

				</view>
			</view>
			<view class="companyInfo" style="margin-bottom: 36rpx;">
				<view class="needNames">
					<text style="color: #F00;">*</text>
					报价详情:
				</view>
			</view>
			<textarea placeholder-style="color: #CCCCCC;font-size: 28rpx;" placeholder="可输入材料，加工费，总价或者工艺等信息。如有多款零件，请上传详细的报价单。"
				style="width: 100%;height: 220rpx;" v-model="description" />
		</view>
		<view class="annexBox">
			<view class="annexBoxL" style="display: flex;align-items: center;">
				<view class="">
					附件
				</view>
				<view style="color: #F00;font-size: 22rpx;margin-left: 10rpx;">
					*上传报价清单更便于采购商理解
				</view>
			</view>
			<view class="annexBoxR" style="">
				可上传报价单、合同、企业资质等文件
			</view>
			<view class="chooseImageBox">
				<image src="https://cdn.xtwaixie.com/uploads/20240415/1713170425661ce7f93c5de.png" mode="widthFix" @tap="confirmType('照片')"></image>
				<image src="https://cdn.xtwaixie.com/uploads/20231227/1703668784658bec302f562rb8auzNQy5Sk97a2adeedc8d8fb31797b01b93320c2a.png" mode="widthFix" @tap="confirmType('文件')"></image>
			</view>
			<view class="imageBox">
				<view class="" v-for='(item,index) in picture' :key="index">
					<image  referrerPolicy='no-referrer' :src="getImgSrc(item.url)" mode="aspectFill"></image>
					<image class="img-del" src="https://wx.xtwaixie.com/img/del.png" @tap="onDel(index,'照片')" />
				</view>
			</view>
			<view class="fileBox" :style="fileList.length !== 0 ? 'padding-bottom: 20rpx;' : ''">
				<view class="" v-for='(item,index) in fileList' :key="index">
					<view class="fileBoxL">
						<image class="img16" src="https://wx.xtwaixie.com/img/file.png" mode="heightFix"></image>
						<view class="">
							{{item.name}}
						</view>
					</view>
					<image class="" src="https://wx.xtwaixie.com/img/del.png" @tap="onDel(index,'文件')" style="width: 50rpx;height: 50rpx;" />
				</view>
			</view>
			<view class="" style="height: 80rpx;">
				
			</view>
		</view>


		<van-popup :show="showToast" round>
			<view class="toastTitle">
				报价流程及投诉介绍
			</view>
			<view class="" style="width: 550rpx;margin: 20rpx auto 40rpx;" v-html="content">

			</view>
			<view class="toastBtn" @tap="showToast=false">
				我已知晓
			</view>
		</van-popup>
		<!-- <view class="" style="height: 95rpx;">		

		</view> -->
		<view class="pd715 bgcf pob" style="bottom: 20rpx;">
			<button class="sub" @tap="submit">提交报价</button>
		</view>
		<van-popup :show="showNotice" @close="onClose" custom-style='background:#00000000;'>
			<image src="https://cdn.xtwaixie.com/uploads/20240415/1713170369661ce7c10e9d1.gif" mode="widthFix" style="width: 500rpx;margin-bottom:180rpx;"></image>
		</van-popup>
		<van-popup :show="show_quotation" round @close="show_quotation = false">
			<view class="ac jc mt5 w311" style="padding-top: 40rpx;">
				<view class="f14 c28 f500 tc" v-if="userInfo.grade === 2 && !userInfo.complaintStatus">因报价投诉达3次，您的报价将提交后台审核。</view>
				<view class="f14 c28 f500 tc pb15" v-if="userInfo.grade === 2 && !userInfo.complaintStatus">审核通过后显示联系方式</view>
				<view class="f14 c28 f500 tc" v-if="userInfo.grade === 1">您是非会员供应商，报价将提交后台审核。</view>
				<view class="f14 c28 f500 tc pb15" v-if="userInfo.grade === 1">审核通过后显示联系方式</view>
				<view class="f16 c28 f500 tc" style="color:#f53d10 !important" v-if="userInfo.grade === 1">提交将扣除1次报价次数</view>
				<view class="f16 c28 f500 tc pb15">是否提交报价？</view>
			</view>
			<view class="df ac btf1 h48 mt15">
				<p class="w50 tc f16 c28" @tap.native="show_quotation = false">取消</p>
				<button class="share-but1 h48 c10" @tap="confirmSale">确认</button>
			</view>
		</van-popup>
		<van-popup :show="ifVip" z-index='10000' :close-on-click-overlay='true'
			custom-style='background:rgba(0,0,0,0);' @close='close'>
			<view class="popupBox">
				<image referrerPolicy='no-referrer' src="https://cdn.xtwaixie.com/uploads/20240418/17134328666620e922b3a16.png" mode="widthFix" class="popupImg"
					@click="member()" style="width: 610rpx;"></image>
			</view>
		</van-popup>
	</view>
</template>

<script>
	import model from "../../component/model";
	const http = require('../../utils/http');
	export default {
		components: {
			model
		},
		data() {
			return {
				show_quotation: false,
				userInfo: {},
				id: '',
				price: '',
				description: '',
				showToast: false,
				showTips: false,
				content: '',
				userInfo: '',
				picture: [],
				fileList: [],
				address: '',
				delivery: '',
				is_freight: '',
				is_tax_include: '',
				spare_parts_name: '',
				showNotice:false,
				index:0,
				ifVip:false
			};
		},
		onLoad(opt) {
			this.index = opt.index
			console.log(opt.index);
			this.delivery = opt.delivery
			this.spare_parts_name = opt.spare_parts_name
			this.id = opt.id
			if (opt.is_freight) {
				this.is_freight = opt.is_freight
			}
			if (opt.is_tax_include) {
				this.is_tax_include = opt.is_tax_include
			}
		},
		onShow() {
			this.getContent()
			this.getInfo()
			this.getList()
		},
		methods: {
			close(){
				this.ifVip = false
			},
			member() {
				this.ifVip = false
				uni.navigateTo({
					url: '/pages/recharge/recharge'
				});
				// if (this.platform === 'ios') {
				// 	uni.navigateTo({
				// 		url: '/pages/recharge/iosvip'
				// 	});
				// } else {
				// 	uni.navigateTo({
				// 		url: '/pages/recharge/recharge'
				// 	});
				// }
			},
			onClose(){
				this.showNotice = false
			},
			submit(){
				if (!this.price) {
					uni.showToast({
						title: '请输入订单总金额',
						icon: "none"
					})
					return
				}
				if (!this.description) {
					uni.showToast({
						title: '请输入描述',
						icon: "none"
					})
					return
				}
				if(this.index == 1){
					this.ifVip = true
					return
				}
				this.show_quotation = true
			},
			confirmSale() {
				console.log(1);
				// if (!this.price) {
				// 	uni.showToast({
				// 		title: '请输入订单总金额',
				// 		icon: "none"
				// 	})
				// 	return
				// }
				// if (!this.description) {
				// 	uni.showToast({
				// 		title: '请输入描述',
				// 		icon: "none"
				// 	})
				// 	return
				// }
				this.show_quotation = false
				let ifFirstPopup = uni.getStorageSync('ifFirstPopup')
				if (!ifFirstPopup) {
					this.showNotice = true
					uni.setStorageSync('ifFirstPopup', true)
				}
				
				const self = this
				uni.requestSubscribeMessage({
					tmplIds: ['VFzK9QykUmGyTn9YRVHrxmihxNELMsUhJxvTWnhNHa8'],
					complete() {
						self.showNotice = false
						self.quotation()
					}
				})
			},
			quotation(){
				http.request('demand/quotation', {
						id: this.id,
						price: this.price,
						description: this.description,
						file: this.picture.concat(this.fileList)
					})
					.then((res) => {
						uni.showToast({
							title: '报价成功'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					})
					.catch((res) => {
						uni.showToast({
							title: res.message || res.msg,
							icon: 'none'
						});
					});
			},
			onAddress() {
				uni.navigateTo({
					url: '/pages/address/addressList'
				});
			},
			getList() {
				http.request('user/settledInfo')
					.then((res) => {
						this.address = res.data.info
					})
					.catch((res) => {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					});
			},
			getInfo() {
				http.request('user/userInfo')
					.then((res) => {
						this.userInfo = res.data.userInfo
						if (res.data.userInfo.status != 1) {
							uni.showToast({
								title: '该账号已被冻结',
								icon: 'none'
							});
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 1000);
						}
					})
					.catch((res) => {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					});
			},
			onDel(index,item) {
				if(item == '照片'){
					this.picture.splice(index, 1)
				}else{
					this.fileList.splice(index, 1)
				}
			},
			confirmType(e) {
				if (e == '照片') {
					let that = this;
					uni.chooseImage({
						count: 9,
						sizeType: ['compressed'],
						success(res) {
							uni.showLoading({
								title: '上传中'
							});
							for (let j = 0; j < res.tempFilePaths.length; j++) {
								http.upLoadFile('base/uploadImg', 'image', res.tempFilePaths[j], {})
									.then((res) => {
										that.picture.push({
											url: res.data.url,
											name: res.data.url
										})
										uni.hideLoading();
									})
									.catch((res) => {
										uni.hideLoading();
										uni.showToast({
											title: res.message,
											icon: 'none'
										});
									});
							}
						},
						fail() {
							uni.hideLoading();
						}
					});
				} else {
					let that = this;
					uni.chooseMessageFile({
						count: 9,
						type: 'file',
						success(res) {
							uni.showLoading({
								title: '上传中'
							});
							let up_length = 0;
							let list_length = res.tempFiles.length;
							for (let j = 0; j < res.tempFiles.length; j++) {
								let tempFiles = res.tempFiles[j];
								http.upLoadFile('base/getFile', 'file', tempFiles.path, {})
									.then((res) => {
										that.fileList.push({
											url: res.data.file,
											name: tempFiles.name
										})
										up_length = up_length + 1;
										if (up_length == list_length) {
											uni.hideLoading();
										}
									})
									.catch((res) => {
										uni.hideLoading();
										uni.showToast({
											title: res.message,
											icon: 'none'
										});
									});
							}
						},
						fail(res) {
							uni.hideLoading();
						}
					});
				}
			},
			getContent() {
				http.request('base/pageCount')
					.then((res) => {
						if (res.code == 200) {
							this.content = res.data.bjlcxzjs ? res.data.bjlcxzjs.replace(/<img/g,
								'<img class="rich-text-img"') : '';
						}
					})
					.catch((res) => {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					});
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F7F6;
	}

	.quotation {
		.annexBox {
			width: 750rpx;
			padding: 0 25rpx 36rpx;
			box-sizing: border-box;
			background-color: #FFF;
			.fileBox {
				font-size: 30rpx;
			
				.img16 {
					height: 50rpx;
					margin-right: 10rpx;
				}
			
				>view {
					margin: 20rpx auto;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			
				.fileBoxL {
					display: flex;
					align-items: center;
			
					>view {
						width: 300rpx;
						overflow: hidden;
						/*   超出容器的部分影响  */
						white-space: nowrap;
						/*  文本不换行   */
						text-overflow: ellipsis;
						/*  超出容器的文本显示省略号  */
					}
				}
			}

			.imageBox {
				margin-top: 36rpx;
				display: flex;
				flex-wrap: wrap;

				.img-del {
					width: 50rpx;
					height: 50rpx;
					position: absolute;
					right: 0;
					top: 0;
				}

				>view {
					width: 200rpx;
					height: 200rpx;
					margin-bottom: 50rpx;
					position: relative;

					&:nth-child(3n+1) {
						margin-right: 50rpx;
					}

					&:nth-child(3n+2) {
						margin-right: 50rpx;
					}
				}

				image {
					width: 100%;
					height: 100%;
				}

			}

			.annexBoxL {
				font-size: 28rpx;
				color: #333333;
				padding-top: 36rpx;
				padding-bottom: 36rpx;
				border-top: 1rpx solid #e8e8e8;
			}

			.annexBoxR {
				font-size: 28rpx;
				color: #CCCCCC;
				margin-bottom: 36rpx;
			}

			.chooseImageBox {
				display: flex;
				justify-content: space-between;

				image {
					width: 335rpx;

				}
			}
		}

		




		.questionBox {
			margin: 24rpx 0;
			width: 750rpx;
			box-sizing: border-box;
			padding-right: 25rpx;
			font-size: 22rpx;
			color: #FD0000;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			image {
				margin-left: 8rpx;
				width: 30rpx;
				height: 30rpx;
			}
		}

		.toastTitle {
			width: 600rpx;
			text-align: center;
			font-size: 30rpx;
			padding: 20rpx 0;
			font-weight: bold;
			border-bottom: 1rpx solid #0009;
		}

		.toastBtn {
			text-align: center;
			font-weight: bold;
			width: 600rpx;
			color: #FFF;
			font-size: 30rpx;
			line-height: 80rpx;
			background-color: #1A4FBF;
		}

		.quotationBox {
			margin: 24rpx auto;
			background-color: #FEFEFE;
			width: 750rpx;
			box-sizing: border-box;
			padding: 36rpx 25rpx 18rpx;
		}

		.needBox {
			border-top: 1rpx solid #e8e8e8;
			padding: 18rpx 0 ;
			border-bottom: 1rpx solid #e8e8e8;
			margin: 18rpx 0 ;
		}

		.cMargin {
			padding-bottom: 36rpx;
			border-bottom: 1rpx solid #e8e8e8;
			margin-bottom: 36rpx;
		}

		.companyInfo {
			display: flex;
			.addressBox {
				width: calc(100% - 100rpx);
				display: flex;
				align-items: center;
				justify-content: space-between;

				.moneyIcon {
					font-size: 28rpx;
					color: #333333;
					margin-left: 20rpx;
				}

				.addressTips {
					padding: 8rpx 14rpx;
					background: #FD0000;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					font-size: 22rpx;
					color: #FFF;
				}

				>view {
					display: flex;
					align-items: center;
				}
			}

			.needNames {
				width: 158rpx;
				font-size: 28rpx;
				color: #333333;
			}

			.needName {
				width: 158rpx;
				font-size: 28rpx;
				color: #999999;
			}

			.needContent {
				font-size: 28rpx;
				line-height: 1.5;
				color: #333333;
			}

			.companyInfoL {

				margin-right: 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.companyInfoTitle {
					text-align: center;
					width: 128rpx;
					line-height: 42rpx;
					background: #1052C3;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}

			.companyCountry {
				margin-bottom: 15rpx;
				font-weight: bold;
				line-height: 42rpx;
				font-size: 32rpx;
				color: #333333;
			}

			.companyName {
				margin-bottom: 20rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}

			.companyUser {
				margin-bottom: 20rpx;
				font-size: 28rpx;
				color: #333333;
			}

			.companyAddress {
				font-size: 28rpx;
				color: #333333;
			}
		}
		.share-but1 {
		    width: 50% !important;
		    font-size: 32rpx;
		    padding: 0 !important;
		    margin: 0 !important;
		    font-weight: 400;
		    text-align: center;
		    color: #283043;
		    line-height: 96rpx;
		    border-left: 1rpx solid #ebedf0;
		}
		
	}
</style>